<template>
    <div class="f_div">
        <div class="t_div">基础资料 / <a href="#">地址管理</a></div>
        <el-container>
            <el-header class="header">
                <div class="h_div">
                    <div class="h_in_vid">
                        <el-button type="primary" style="width: 80px" @click="add">
                            新增
                        </el-button>
                    </div>
                </div>
            </el-header>
            <el-header class="header1">
                <div class="h_div">
                    <div class="h_in_vid">
                        <el-button type="primary" style="width: 80px" @click="show" color="#F7F7F7">
                            全部
                        </el-button>
                        <el-button type="primary" style="width: 80px" @click="fahuo" color="#F7F7F7">
                            发货地址
                        </el-button>
                        <el-button type="primary" style="width: 80px" @click="shou" color="#F7F7F7">
                            收货地址
                        </el-button>
                    </div>
                </div>
            </el-header>
            <el-header class="header2">
                <div class="h_div">
                    <div class="h_in_vid">
                        <el-form ref="form" :inline="true" :model="searchForm" class="demo-form-inline">
                            <el-form-item label="创建日期：">
                                <el-date-picker v-model="value2" type="datetimerange" range-separator="To"
                                    start-placeholder="请选择日期" end-placeholder="请选择日期" format="YYYY-MM-DD"
                                    value-format="YYYY-MM-DD"></el-date-picker>
                            </el-form-item>
                            <el-form-item label="搜索：">
                                <el-input v-model="value" placeholder="请输入客户搜索"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="tjian">搜索</el-button>
                                <el-button @click="handleReset">重置</el-button>
                            </el-form-item>


                        </el-form>
                    </div>
                </div>
            </el-header>
            <el-main class="main">
                <el-table height="442px" :data="tableData" style="width: 100%" row-key="ar_id" default-expand-all stripe
                    :header-cell-style="{
                            background: '#F7F7F7',
                            color: '#999',
                            textAlign: 'center',
                        }" :cell-style="{ textAlign: 'center' }">
                    <el-table-column property="ord_state" label="地址类型" width="120">
                        <template #default="scope">
                            <span>{{ formatOrderState(scope.row.ar_type) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="ar_client" label="客户" width="120px"></el-table-column>
                    <el-table-column prop="ar_contact" label="联系人" width="120px"></el-table-column>
                    <el-table-column prop="ar_phone" label="联系电话" width="120px"></el-table-column>
                    <el-table-column prop="ar_adrs" label="详细地址" width="420px"></el-table-column>
                    <el-table-column prop="ar_remarks" label="备注" width="220px"></el-table-column>
                    <el-table-column label="操作">
                        <template #default="scoped">
                            <el-button type="text" size="small" @click="edit(scoped.row.ar_id)">编辑</el-button>
                            <el-button link type="danger" @click="del(scoped.row.ar_id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination-container">
                    <el-pagination style="float: right;margin-top: 10px;" v-model:current-page="currentPage"
                        v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]" :disabled="false"
                        :background="false" layout="total, sizes, prev, pager, next, jumper" :total="count"
                        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script>
import { ref, reactive, resolveComponent, onMounted } from "vue";
import axios from "axios";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import $http from '@/axios/base.js';


export default {
    setup() {
        let tableData = ref([]);
        let value = ref("");
        let value1 = ref("");
        let value2 = ref("");
        let currentPage = ref("1");
        let pageSize = ref("10");
        let count = ref();

        let router = useRouter();

        function formatOrderState(status) {
            switch (status) {
                case 105:
                    return '发货地址';
                case 106:
                    return '收货地址';
            }
        }

        function add() {
            router.push({ path: "/AddressCreate", query: { name: "新增地址信息", id: 0 } });
        }

        function show() {
            $http
                .get(`http://localhost:5261/api/Address_ment/GetAddress_ments/${currentPage.value},${pageSize.value}`)
                .then((res) => {
                    tableData.value = res;
                    console.log(tableData.value);
                })
                .catch((err) => console.log(err));
        }

        function tjian() {

            $http
                .get(`http://localhost:5261/api/Address_ment/Address_condition/${currentPage.value},${pageSize.value}?Create_time=${value2.value}&value2=${value.value}`)
                .then((res) => {
                    tableData.value = res;
                    AddressCount();
                })
                .catch((err) => console.log(err));
        }

        function fahuo() {
            $http
                .get(`http://localhost:5261/api/Address_ment/GetAr_type/${currentPage.value},${pageSize.value}`)
                .then((res) => {
                    tableData.value = res;
                })
                .catch((err) => console.log(err));
        }

        function shou() {
            $http
                .get(`http://localhost:5261/api/Address_ment/GetAd_type/${currentPage.value},${pageSize.value}`)
                .then((res) => {
                    tableData.value = res;
                })
                .catch((err) => console.log(err));
        }

        function edit(id) {
            router.push({ path: "/AddressCreate", query: { name: "编辑客户信息", id: id } });
        }

        function del(ar_id) {
            $http
                .delete(`http://localhost:5261/api/Address_ment/DelAddress/${ar_id}`)
                .then((res) => {
                    if (res) {
                        show();
                        ElMessage.success("删除成功！！！");
                    } else {
                        ElMessage.error("异常错误！");
                    }
                })
                .catch((err) => console.log(err));
        }

        onMounted(() => {
            show(),
                formatOrderState()
        });
        function AddressCount() {
            $http.get(`http://localhost:5261/api/Address_ment/Count?Create_time=${value2.value}&value2=${value.value}`)
            .then((res) => {
                count.value = res;
                console.log(res);
            }).catch((err) => {
                console.log("错误：" + err);
            })
        }
        AddressCount();

        const searchForm = reactive({
            level: "1",
            dateRange: "",
            keyword: "",
        });




        function handleSearch() {
            console.log(searchForm);
        }

        function handleReset() {
            // 重置表单
            searchForm.level = "";
            searchForm.dateRange = "";
            searchForm.keyword = "";
            // 重置表格数据
            // ...
        }

        function handleSizeChange(val) {
            pageSize.value = val;
            show();
        }

        function handleCurrentChange(val) {
            currentPage.value = val;
            show();
        }

        return {
            value,
            value1,
            value2,
            tableData,
            searchForm,
            currentPage,
            pageSize,
            handleSearch,
            handleReset,
            handleSizeChange,
            del,
            handleCurrentChange,
            show,
            tjian,
            edit,
            add,
            fahuo,
            shou,
            formatOrderState,
            count
        };
    },
};
</script>

<style scoped>
.pagination-container {
    display: flex;
    justify-content: right;
    margin-top: 20px;
}

.t_div {
    margin-bottom: 20px;
    text-align: left;
    font-size: 14px;
    color: #b3b4b6;
}

a {
    text-decoration: none;
}

.f_div {
    padding: 0px 50px;
}

.h_div {
    height: 80px;
}

.h_in_vid {
    width: 1400px;
    height: 20px;
    margin-top: 20px;
    display: flex;
}

.header {
    background-color: #ffffff;
    border-radius: 10px 10px 0px 0px;
}

.header1 {
    background-color: #ffffff;
}

.header2 {
    background-color: #ffffff;
}

.main {
    background-color: #ffffff;
    border-radius: 0px 0px 10px 10px;
    height: 650px;
}
</style>